// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 游戏分类项点击事件
  const gameItems = document.querySelectorAll('.game-item');
  const gameInfoPopup = document.querySelector('.game-info-popup');
  const gameVideoPlayer = document.querySelector('.game-video-player');
  const popupOverlay = document.querySelector('.popup-overlay');
  const closePopupBtn = document.querySelector('.close-popup');
  const closeVideoPlayerBtn = document.querySelector('.close-video-player');
  const gameVideo = document.getElementById('game-video');
   const bannerVideo = document.getElementById('banner-video'); // 获取轮播视频元素
  // 游戏分类项点击事件
  gameItems.forEach(item => {
    item.addEventListener('click', function() {
      // 移除所有游戏项的active类
      gameItems.forEach(i => i.classList.remove('active'));
      // 为当前点击的游戏项添加active类
      this.classList.add('active');
      
      // 获取游戏信息
      const gameInfo = JSON.parse(this.getAttribute('data-info'));
      
      // 更新悬浮框内容
     document.querySelector('.popup-title').textContent = gameInfo.name;
      const logoContainer = document.querySelector('.game-logo');
      logoContainer.innerHTML = `<img src="images/${gameInfo.logo}" alt="${gameInfo.name}图标">`;
      document.querySelector('.game-description').textContent = gameInfo.description;
      document.querySelector('.game-type .meta-value').textContent = gameInfo.type;
      document.querySelector('.game-release .meta-value').textContent = gameInfo.release;
      

      // 暂停轮播视频
      bannerVideo.pause();

      // 更新视频源并自动播放
      gameVideo.src = "videos/tou.mp4"; // 固定播放指定视频
      gameVideo.load();
      gameVideo.play().catch(e => {
        // 处理自动播放可能的错误（如需要用户交互）
        showNotification('warning', '视频自动播放失败', '请点击视频播放按钮开始播放');
      });
      
      // 显示悬浮框和遮罩层
      gameInfoPopup.classList.add('active');
      popupOverlay.classList.add('active');
      
      // 显示视频播放框
      setTimeout(() => {
        gameVideoPlayer.classList.add('active');
      }, 100);
    });
  });
   // 关闭悬浮框按钮事件
    closePopupBtn.addEventListener('click', function() {
    gameInfoPopup.classList.remove('active');
    // 隐藏视频播放框并停止视频
    gameVideoPlayer.classList.remove('active');
    gameVideo.pause();
    gameVideo.currentTime = 0;
    // 隐藏遮罩层
    popupOverlay.classList.remove('active');
      // 恢复轮播视频播放
    bannerVideo.play();
  });
  
  // 关闭视频播放框按钮事件
  closeVideoPlayerBtn.addEventListener('click', function() {
    gameVideoPlayer.classList.remove('active');
    gameVideo.pause();
    gameVideo.currentTime = 0;
     bannerVideo.play();
  });
  
  // 点击遮罩层关闭所有弹出框
  popupOverlay.addEventListener('click', function() {
    gameInfoPopup.classList.remove('active');
    gameVideoPlayer.classList.remove('active');
    gameVideo.pause();
    gameVideo.currentTime = 0;
    popupOverlay.classList.remove('active');
     bannerVideo.play();
  });
  
  // 精彩回放视频点击事件
  const highlightThumbs = document.querySelectorAll('.highlight-thumb');
  const videoModal = document.querySelector('.modal.video-modal');
  const videoPlayer = document.getElementById('video-player');
  const closeVideoModalBtn = document.querySelector('.close-modal');
  
  highlightThumbs.forEach(thumb => {
    thumb.addEventListener('click', function() {
      const videoSrc = this.getAttribute('data-video');
      videoPlayer.src = videoSrc;
      videoModal.classList.add('active');
      videoPlayer.load();
      videoPlayer.play();
    });
  });
  // 视频模态框关闭时恢复轮播视频
  document.querySelector('.close-modal').addEventListener('click', function() {
    document.querySelector('.modal.video-modal').classList.remove('active');
    document.getElementById('video-player').pause();
    document.getElementById('video-player').currentTime = 0;
    
    // 恢复轮播视频播放
    bannerVideo.play();
  });
  
  // 关闭视频模态框
  closeVideoModalBtn.addEventListener('click', function() {
    videoModal.classList.remove('active');
    videoPlayer.pause();
    videoPlayer.currentTime = 0;
  });
  
  // 点击模态框外部关闭
  videoModal.addEventListener('click', function(e) {
    if (e.target === videoModal) {
      videoModal.classList.remove('active');
      videoPlayer.pause();
      videoPlayer.currentTime = 0;
    }
  });
  
  // 倒计时功能
  function updateCountdowns() {
    const countdowns = document.querySelectorAll('.countdown');
    
    countdowns.forEach(countdown => {
      // 这里简化处理，实际应用中应该根据真实的比赛时间计算
      const hours = countdown.querySelector('.hours');
      const minutes = countdown.querySelector('.minutes');
      const seconds = countdown.querySelector('.seconds');
      
      let h = parseInt(hours.textContent);
      let m = parseInt(minutes.textContent);
      let s = parseInt(seconds.textContent);
      
      s--;
      
      if (s < 0) {
        s = 59;
        m--;
        
        if (m < 0) {
          m = 59;
          h--;
          
          if (h < 0) {
            h = 0;
            m = 0;
            s = 0;
          }
        }
      }
      
      hours.textContent = h.toString().padStart(2, '0');
      minutes.textContent = m.toString().padStart(2, '0');
      seconds.textContent = s.toString().padStart(2, '0');
    });
  }
  
  // 每秒更新一次倒计时
  setInterval(updateCountdowns, 1000);
  
  // 模拟通知提示
  function showNotification(type, title, message) {
    const notificationContainer = document.querySelector('.notification-container');
    
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.innerHTML = `
      <div class="notification-icon">
        ${type === 'success' ? '<i class="fa fa-check-circle"></i>' : 
          type === 'error' ? '<i class="fa fa-times-circle"></i>' : 
          type === 'warning' ? '<i class="fa fa-exclamation-circle"></i>' : 
          '<i class="fa fa-info-circle"></i>'}
      </div>
      <div class="notification-content">
        <div class="notification-title">${title}</div>
        <div class="notification-message">${message}</div>
      </div>
      <button class="notification-close">&times;</button>
    `;
    
    // 添加到容器
    notificationContainer.appendChild(notification);
    
    // 显示通知
    setTimeout(() => {
      notification.classList.add('active');
    }, 100);
    
    // 关闭按钮事件
    const closeBtn = notification.querySelector('.notification-close');
    closeBtn.addEventListener('click', function() {
      notification.classList.remove('active');
      setTimeout(() => {
        notification.remove();
      }, 300);
    });
    
    // 自动关闭
    setTimeout(() => {
      notification.classList.remove('active');
      setTimeout(() => {
        notification.remove();
      }, 300);
    }, 5000);
  }
  
  // 页面加载完成后显示欢迎通知
  setTimeout(() => {
    showNotification('info', '欢迎来到赛事中心', '这里有最新、最精彩的电竞赛事直播和回放！');
  }, 2000);
  
  // 模拟直播状态变化通知
  setTimeout(() => {
    showNotification('success', '直播开始', '王者荣耀职业联赛 - 半决赛已经开始直播！');
  }, 8000);
});